import React, {Component} from 'react'
import '../../static/scss/common/myBasicInfo.scss'
import {Button, Form, Input, Modal} from 'antd'
import Iconfont from '../../utils/iconfont'

/* eslint-disable */
class MyBasicInfo extends Component {
    state = {
        userInfo: {},
        isEditPwd: false,
        visibleModal: false
    }

    componentDidMount() {
        // this.getUserInfo();
    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
        }
    }

    /*获取用户信息*/
    getUserInfo = () => {
    }
    /*打开关闭修改密码页*/
    openCloseStatus = () => {
        this.setState({isEditPwd: !this.state.isEditPwd});
    }
    /*确认修改密码*/
    confirmHandle = () => {
    }

    /*打开关闭弹窗*/
    openCloseModal = () => {
        this.setState({visibleModal: !this.state.visibleModal});
    }

    onFinish = values => {
    }

    render() {
        const {userInfo, isEditPwd, visibleModal} = this.state;
        const modalProps = {
            title: '修改手机号',
            visible: visibleModal,
            centered: true,
            destroyOnClose: true,
            width: 300,
            footer: null,
            bodyStyle: {
                padding: 15
            }
        }
        return (
            <>
                <div className="my_basic_info_module animate__animated animate__fadeIn">
                    <div className="section_item user_info">
                        <h3>个人信息</h3>
                        <Form labelCol={{span: 3}} labelAlign="left">
                            <Form.Item label="用户名"><p>{userInfo.accunt}</p></Form.Item>
                            <Form.Item label="手机号">
                                <p>{userInfo.mobile}
                                    <span onClick={this.openCloseModal}
                                          className={'editIcon ' + (visibleModal ? 'active' : '')}><Iconfont
                                        type="icon-bianji"/></span>
                                </p>
                            </Form.Item>
                            <Form.Item label="真实姓名"><p>{userInfo.realName}</p></Form.Item>
                            <Form.Item label="身份证号"><p>{userInfo.idCard || ''}</p></Form.Item>
                            <Form.Item label="所属角色"><p>{userInfo.roleName}</p></Form.Item>
                            <Form.Item label="所属单位"><p>{userInfo.unitName}</p></Form.Item>
                        </Form>
                    </div>
                    <div className="section_item changePassword">
                        <h3>修改密码<span onClick={this.openCloseStatus}
                                      className={'editIcon ' + (isEditPwd ? 'active' : '')}><Iconfont
                            type="icon-bianji"/></span></h3>
                        <Form ref="userRef" labelCol={{span: 3}} labelAlign="left"
                              initialValues={{oldPwd: '', newPwd: '', pwdS: ''}} wrapperCol={{span: 8}}>
                            {isEditPwd ?
                                <>
                                    <Form.Item label="原始密码" name="oldPwd"
                                               rules={[{required: true, message: '请填写原始密码'}]}>
                                        <Input.Password/>
                                    </Form.Item>
                                    <Form.Item label="新密码" name="newPwd" rules={[{required: true, message: ''}, () => ({
                                        validator: (rule, value) => {
                                            if (/^[a-zA-Z]\w{3,17}$/.test(value)) {
                                                return Promise.resolve();
                                            }
                                            return Promise.reject('格式：字母开头，a-zA-Z、0-9、_,长度4-18位')
                                        }
                                    })]}>
                                        <Input.Password/>
                                    </Form.Item>
                                    <Form.Item label="确认密码" name="pwdS" rules={[{required: true, message: ''}, () => ({
                                        validator: (rule, value) => {
                                            let {newPwd} = this.refs.userRef.getFieldsValue();
                                            if (/^[a-zA-Z]\w{3,17}$/.test(value)) {
                                                if (value !== newPwd) {
                                                    return Promise.reject('两次密码不一致');
                                                }
                                                return Promise.resolve();
                                            }
                                            return Promise.reject('格式：字母开头，a-zA-Z、0-9、_,长度4-18位')
                                        }
                                    })]}>
                                        <Input.Password/>
                                    </Form.Item>
                                    <Form.Item className="btn_form_item" wrapperCol={{push: 3, span: 8}}>
                                        <div className="custom_btn_group">
                                            <span onClick={this.confirmHandle}>确定</span>
                                            <span onClick={this.openCloseStatus}>取消</span>
                                        </div>
                                    </Form.Item>
                                </> :
                                <Form.Item label="密码">
                                    <p>********</p>
                                </Form.Item>
                            }
                            <Form.Item noStyle>
                                <p className="tips">注：原始密码默认为123456，为确保你的安全，请尽快修改密码，修改后请自行记住，切勿告诉他人。</p>
                                <p className="tips">如果忘记密码，请联系管理员进行重置。</p>
                            </Form.Item>
                        </Form>
                    </div>
                    <Modal {...modalProps} onCancel={this.openCloseModal}>
                        <Form onFinish={this.onFinish}>
                            <Form.Item name="mobile" rules={[{required: true, message: '请填写手机号'}]}>
                                <Input style={{width: '100%'}}/>
                            </Form.Item>
                            <Form.Item noStyle>
                                <div style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
                                    <Button onClick={this.openCloseModal} style={{marginRight: '10px'}}>取消</Button>
                                    <Button type="primary" htmlType="submit">更新</Button>
                                </div>
                            </Form.Item>
                        </Form>
                    </Modal>
                </div>
            </>
        )
    }
}

export default MyBasicInfo